import React from 'react'
import clearImg from '../../static/clear.png'
import styles from './index.css'

export class InputItem extends React.Component{
    constructor(props){
        super(props)
        this.state={value:this.props.value}
    }
    componentDidMount(){

    }
    handleChange(event){
        if(this.props.onChange){
            this.props.onChange(event)
        }
        this.setState({
            value:event.target.value
        })
    }

    handleValid(){

    }
    handleClear(){
        this.setState({value:''})
    }
    render(){
        React.Children.map(this.props.children,function (child){
            console.dir(child)
        })
        console.dir(this.props)
        const before = this.props.before
        const beforeEle = (<div className="inputItem-label">{before}</div>)

        const ele=(<div className="inputItem-container">

            <input type="text" onChange={this.handleChange.bind(this)} value={this.state.value} placeholder={this.props.placeholder}/>
            {before==null?"":<div className="inputItem-label">{this.props.before}</div>}
            {this.state.value==''?'':<img src={clearImg} alt="" onClick={this.handleClear.bind(this)}/>}

        </div>)
        return ele
    }

}

class Input extends React.Component{
    constructor(props){
        super(props)
        this.state={
            value:this.props.value
        }
    }

    componentDidMount(){
    }

    handleChange(event){
        if(this.props.onChange){
            this.props.onChange(event)
        }
        this.setState({
            value:event.target.value
        })
    }

    handleValid(){

    }
    handleClear(){
        this.setState({value:''})
    }

    render(){
        const before = this.props.before
        const beforeEle = (<div className="input-label">{before}</div>)

        const ele=(<div className="input-container">
            {before==null?"":<div className="input-label">{this.props.before+'  :'}</div>}
            <div className="input-content"><input type="text" onChange={this.handleChange.bind(this)} value={this.state.value} placeholder={this.props.placeholder}/>
                {this.state.value==''?'':<img src={clearImg} alt="" onClick={this.handleClear.bind(this)}/>}
            </div>

        </div>)
        return ele
    }
}

export default Input
